<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%> 
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>

<!--编码格式为 utf-8(国际编码)-->
<meta charset="utf-8">

<!--设置页面关键字-->
<meta name="keywords" content="设置网站关键字">

<!--设置页面的描述-->
<meta name="description" content="设置页面的描述,建议在200字以内">

<!--设置浏览器优先使用急速模式-->
<meta name="renderer" content="webkit">

<!--禁止移动设备UC浏览器对字体大小的控制-->
<meta name="wap-font-scale" content="no">

<!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame(谷歌浏览器内嵌框架)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--建立一个视觉窗口, 可视区域宽度等于设备宽度, 初始缩放比例为1倍, 最小缩放比例为1倍, 最大缩放比例为1倍, 禁止用户进行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

<title>城市列表</title>

<link rel="stylesheet" href="<%=basePath%>css/zhicwl.css">
<link rel="stylesheet" href="<%=basePath%>css/zhicwl-bj.css">
<link rel="stylesheet" href="<%=basePath%>css/zhicwl-zj.css">

<script src="<%=basePath%>js/fontSize.js"></script>
<script src="<%=basePath%>js/jquery-1.11.3.min.js"></script>

<link rel="stylesheet" href="<%=basePath%>plugins/layer/skin/default/layer.css"/>
<script src="<%=basePath%>plugins/layer/layer.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F6eTaN7pws2E23tdZL5BHPQeRWBXyLbW"></script>
<script type="text/javascript">
function setCity(name, code){
	window.parent.setCity(name, code);
}
$(function() {
	/* var loading = layer.load(0, {shade:[0.4, '#fff']});
	$("#current_city").html("--");
	var geoc = new BMap.Geocoder();
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS) {
			var mk = new BMap.Marker(r.point);
			geoc.getLocation(r.point, function(rs){
				var addComp = rs.addressComponents;
				var current_city = addComp.city;
				$("#current_city").html(current_city);
				layer.close(loading);
			});
		}
		else {
			alert('failed'+this.getStatus());
		}
	},{enableHighAccuracy: true}); */
});
</script>
</head>

<body>

<style>
body{ background-color: #F0EFED;}
</style>

<!--头部-->
<div class="header-1 padding-tb-10 padding-lr-15">
	<div class="header-1-left"><a href="javascript:void(0)" onclick="window.parent.closeCity()"></a></div>
  <div class="header-1-titel">选择城市</div>
  <%-- <div class="header-1-right">
  	<div><a href="###"><img src="<%=basePath%>images/img46.png">首页</a></div>
    <div><a href="###"><img src="<%=basePath%>images/img47.png">搜索</a></div>
  </div> --%>
</div>
<div class="header-1-height"></div>
<!--/头部-->

<!--定位城市-->
<div class="padding-top-15 padding-lr-15">
  <div class="wklscd background-color2 padding-lr-15 padding-tb-15">
    定位城市：<span class="color9" id="current_city">${location}</span>
  </div>
</div>
<!--/定位城市-->

<!--热门城市-->
<div class="padding-lr-15  margin-top-25">
	<h3 class="titksmld">热门城市</h3>
  <div class="cjslwr background-color2">
  	<ul>
  	  <c:forEach items="${list}" var="city">
  	  	<c:if test="${city.isHot == 1}">
  	  	<li><a href="javascript:void(0)" onclick="setCity('${city.name}', '${city.code}')">${city.name}</a></li>
  	  	</c:if>
      </c:forEach>
    </ul>
  </div>
</div>
<!--/热门城市-->

<!--全部城市-->
<div class="padding-lr-15 margin-top-25">
	<h3 class="titksmld">全部城市</h3>
  <div class="quacshi background-color2">
  	
    <!--拼音搜索-->
    <div class="quacshi-pyi">
	  <ul>
    	<c:forEach items="${letters}" var="letter">
    	<li><a href="#${letter}">${letter}</a></li>
    	</c:forEach>
      </ul>
    </div>
    <!--/拼音搜索-->

	<!--锚点-->
	<div class="miaodian">
	<c:forEach items="${letters}" var="letter">
	  <!--A-->
      <div class="abc">
      	<a class="mdjli" name="${letter}"></a>
        <ul>
          <h4>${letter}</h4>
          <c:set value="0" var="i"></c:set>
          <c:forEach items="${list}" var="city">
          <c:if test="${city.first_letter == letter}">
          	<li><a href="javascript:void(0)" onclick="setCity('${city.name}', '${city.code}')">${city.name}</a></li>
          	<c:set var="i" value="${i+1}"></c:set>
          </c:if>
          </c:forEach>
          <c:choose>
          	<c:when test="${i<=6}">
          	  <c:choose>
          	  	<c:when test="${i==0}">
          	  	<li></li><li></li><li></li><li></li><li></li><li></li>
          	  	</c:when>
          	  	<c:otherwise>
          	  		<c:set value="#{6-i+4}" var="nullNum"></c:set>
          	  		<c:forEach begin="1" end="${nullNum}" var="i">
	        			<li></li>
	          		</c:forEach>
          	  	</c:otherwise>
          	  </c:choose>
          	</c:when>
          	<c:otherwise>
          	  <c:set value="#{4-(i-6)%4}" var="nullNum"></c:set>
	          <c:if test="${nullNum < 4}">
	          <c:forEach begin="1" end="${nullNum}" var="i">
	        	<li></li>
	          </c:forEach>
	         </c:if>
          	</c:otherwise>
          </c:choose>
          <!-- <li><a href="###">更多»</a></li> -->
        </ul>
      </div>
      <!--/A-->
	</c:forEach>
                                                          
    </div>
    <!--/锚点-->
                
  </div>
</div>

<br><br><br>
<!--/全部城市-->

<!-- 淡出淡入平滑返回到网页顶部 -->
<div class="gotoTop" id="gotoTop"></div>
<!-- /淡出淡入平滑返回到网页顶部 -->


<script src="<%=basePath%>js/zhicwl.js"></script>

</body>
</html>